import './index.scss';

import React, {
  useEffect,
  useState,
} from 'react';

import { useHistory } from 'react-router-dom';

import img0 from '../../assets/img/carousel-1.png';
import ch1 from '../../assets/img/chusei.png';
import ch2 from '../../assets/img/house.png';
import img1 from '../../assets/img/ps-box.png';
import Footer from '../../Components/Footer';
import Header from '../../Components/Header';

function Index() {
  const [ImgIndex, setImgIndex] = useState(0);
  const [carouselImg, setCarouselImg] = useState([]);
  let history = useHistory();

  const toggleImgGo = () => {
    if (ImgIndex == carouselImg.length - 1) {
      setImgIndex(0);
    } else {
      setImgIndex(ImgIndex + 1);
    }
  };
  const toggleImgBack = () => {
    if (ImgIndex == 0) {
      setImgIndex(carouselImg.length - 1);
    } else {
      setImgIndex(ImgIndex - 1);
    }
  };
  useEffect(() => {
    const width = document.documentElement.clientWidth;
    const height = document.documentElement.clientHeight;
    // console.log(width,height);
    if (width < height) {
      setCarouselImg([ch1, ch2]);
    } else {
      setCarouselImg([img0, img1]);
    }
  }, []);

  return (
    <div>
      {/* header */}
      <Header />
      {/* PictureShow */}
      <div className="PictureShow">
        <div className="ps-box"></div>
        <button className="ps-btn btn-6" onClick={() => history.push("/nfts")}>
          Reserve unit
        </button>
      </div>
      {/* About */}
      <div className="About-Nodeform">
        <div className="About-main">
          <div className="About-l">
            <div className="About-l-title">WHO WE ARE</div>
            <div className="About-l-text">About Nodeform</div>
          </div>
          <div className="About-r">
            <div className="About-r-title">
              The Ethereum inspired tiny home built for innovators, builders and
              pioneers suitable for all occasions and seasons.
            </div>
            <div className="About-r-content">
              Sourced from the finest materials, each Node is assembled by hand
              with the highest craftsmanship. Half art, half science. 100%
              marvel.
            </div>
            <button className="About-r-btn" onClick={() => history.push("/about")}>
                More About Us
            </button>
          </div>
        </div>
      </div>
      {/* carousel */}
      <div className="Carousel">
        <div className="Carousel-main">
          <img className="Carousel-img" src={carouselImg[ImgIndex]}></img>


          <div className="Carousel-btn-group">
            <button
              className="Carousel-l-btn Carousel-btn"
              onClick={() => toggleImgBack()}
            >
              <img src={[require("../../assets/img/Vector-1.png")]}></img>
            </button>
            <button
              className="Carousel-r-btn Carousel-btn"
              onClick={() => toggleImgGo()}
            >
              <img src={[require("../../assets/img/Vector.png")]}></img>
            </button>
          </div>


        </div>
      </div>
      {/* metarials */}
      <div className="metarials">
        <div className="metarials-main">
          <div className="metarials-l">
            <div className="metarials-l-top">
              <div className="metarials-l-title">MATERIALS</div>
              <div className="metarials-l-text">
                Our materials are carefully selected and sourced with the
                highest quality, coming together to bring you what you expect
                and deserve. Excellence, nothing less.
              </div>
            </div>
            <div className="metarials-l-list">
              <ul>
                <li>
                  <div className="metarials-l-list-img">
                    <img src={[require("../../assets/img/list1.png")]}></img>
                  </div>
                  <div className="metarials-l-list-text">
                    Insulated Low-E Glazing
                  </div>
                </li>
                <li>
                  <div className="metarials-l-list-img">
                    <img src={[require("../../assets/img/list2.png")]}></img>
                  </div>
                  <div className="metarials-l-list-text">
                    Premium Grade A Baltic Ply
                  </div>
                </li>
                <li>
                  <div className="metarials-l-list-img">
                    <img src={[require("../../assets/img/list3.png")]}></img>
                  </div>
                  <div className="metarials-l-list-text">
                    Snow White Caesarstone Counter
                  </div>
                </li>
                <li>
                  <div className="metarials-l-list-img">
                    <img src={[require("../../assets/img/list4.png")]}></img>
                  </div>
                  <div className="metarials-l-list-text">
                    Blackened Steel Kitchen Hardware
                  </div>
                </li>
                <li>
                  <div className="metarials-l-list-img">
                    <img src={[require("../../assets/img/list5.png")]}></img>
                  </div>
                  <div className="metarials-l-list-text">
                    Nero Marquina Herringbone Tile
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div className="metarials-r">
            <img src={[require("../../assets/img/mask.png")]}></img>
          </div>
        </div>
      </div>
      {/* Order */}
      <div className="Order">
        <div className="Order-main">
          <div className="Order-header">
            <div className="Order-header-title">AMENITIES</div>
            <div className="Order-header-text">
              Downscaled size without downscaling your lifestyle. We are proud
              to feature state of the art amenities to make your stay
              comfortable.
            </div>
          </div>
          <div className="Order-List">
            <ul>
              <li>
                <img src={[require("../../assets/img/hot.png")]}></img>
                <div className="Order-list-title">Wood Fireplace</div>
                <div className="Order-list-label">
                  Classy contemporary fireplace with vented chimney.{" "}
                </div>
              </li>
              <li>
                <img src={[require("../../assets/img/hot.png")]}></img>
                <div className="Order-list-title">Smart Home Connectivity</div>
                <div className="Order-list-label">
                  Wifi available through Starlink. AC and heat monitored by Nest
                  Thermostat or equivalent through a mini split system.{" "}
                </div>
              </li>
              <li>
                <img src={[require("../../assets/img/hot.png")]}></img>
                <div className="Order-list-title">
                  Oversized Stargazing Skylight
                </div>
                <div className="Order-list-label">
                  Our prized design. Explore the night from the warmth of your
                  bed.{" "}
                </div>
              </li>
              <li>
                <img src={[require("../../assets/img/hot.png")]}></img>
                <div className="Order-list-title">Entertaining Pear Deck</div>
                <div className="Order-list-label">
                  Collapsible rear deck for small gatherings.{" "}
                </div>
              </li>
              <li>
                <img src={[require("../../assets/img/hot.png")]}></img>
                <div className="Order-list-title">
                  Nano Particle Privacy Glass
                </div>
                <div className="Order-list-label">
                  Be one with your surroundings with peace of mind. Our privacy
                  glass lets light in but keeps unwanted eyes out.{" "}
                </div>
              </li>
            </ul>
          </div>
          <div className="Order-body">
            <div className="Order-body-l">
              <img src={[require("../../assets/img/order-img.png")]}></img>
            </div>
            <div className="Order-body-r">
              <div className="Order-body-r-title">
                Connect with our team of experts to build your Node today.
              </div>
              <div className="Order-body-r-label">
                We will guide you from start to finish. Our Nodes have a lead
                time of 8 - 12 months, depending on availability.
              </div>
                <button
                  onClick={() => history.push("/nfts")}
                  className="Order-body-r-btn"
                >
                  Order a unit
                </button>
            </div>
          </div>
        </div>
      </div>
      {/* Footer */}
      <Footer />
    </div>
  );
}

export default Index;
